<template>
	<view class="ls-pages">
		<view class="main-wrap">
			<view class="lp-bj" :style="{ '--roter_z': -cmp_direction + 'deg', '--roter_f': cmp_direction + 'deg',
				'--transition': bShowTransition ? 'transform 0.2s ease-out' :'none'
			}">
				<image
					class="luopan"
					src="@/static/images/luopan.png"
					style="width: 100%;height: 100%;"
				></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				acc_x: 0.0,
				bShowTransition: true,
				acc_y: 0.0,
				acc_z: 0.0,
				beforeNum: 0,
				afterNum: 0,
				cmp_direction: 0 // 0度：正北，90度：正东，180度：正南，270度：正西111
			};
		},
		onReady() {
			this.accelerometerStart();
			this.compassStart();
		},
		methods: {
			// 加速计
			accelerometerStart() {
				uni.vibrateLong();
				uni.onAccelerometerChange((res) => {
						this.acc_x = res.x.toFixed(3);
						this.acc_y = res.y.toFixed(3);
						this.acc_z = res.z.toFixed(3);
					}),
					uni.startAccelerometer({
						interval: 'ui' // 'game','normal','ui'
					});
			},
			accelerometerStop() {
				uni.vibrateLong();
				uni.offAccelerometerChange((res) => {
						console.log('加速计取消监听');
					}),
					uni.stopAccelerometer();
			},

			// 罗盘
			compassStart(res) {
				uni.onCompassChange((res) => {
					const num = parseInt(res.direction);
					this.beforeNum = num
					const direction = this.beforeNum - this.afterNum
					if (this.cmp_direction === 0) {
						this.cmp_direction = num
					}

					if (Math.abs(direction) < 180) {
						this.cmp_direction = num
					} else {
						let start
						let end

						if (direction > 0) {
							start = 0
							end = 360
						} else {
							start = 360
							end = 0
						}

						this.cmp_direction = start
						this.$nextTick(() => {
							this.bShowTransition = false
							this.cmp_direction = end
							setTimeout(() => {
								this.bShowTransition = true
								this.cmp_direction = num
							}, 50)
						})
						// this.$nextTick(() => {
						// 		this.bShowTransition = true
						// })
					}

					// if (0 >= num && num <= 180) {
					// 	this.cmp_direction = num;
					// } else {
					// 	this.cmp_direction = 360 - num;
					// }
					// if (360 > num && 180 <= num) {
					// 	this.cmp_direction = -(360 - num);
					// } else {
					// 	this.cmp_direction = num;
					// }
					// if (this.cmp_direction % 30 === 0) {
					// 	uni.vibrateLong();
					// 	// uni.vibrateShort();
					// }
					this.afterNum = num
				});
				uni.startCompass();
			},
			compassStop(res) {
				uni.vibrateLong();
				uni.stopCompass();
			}
		}
	};
</script>

<style lang="scss">
	.ls-pages {
		width: 100%;
		height: 100vh;
		background-color: #f6f6f6;
		position: relative;

		.main-wrap {
			position: relative;
			width: 100%;
			height: 100%;
		}

		.lp-bj {
			position: absolute;
			top: 40%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 680rpx;
			height: 680rpx;
			.luopan {
				content: '';
				position: absolute;
				top: 0;
				width: 100%;
				left: 0;
				height: 100%;
				border-radius: 100%;

				transform: rotateZ(var(--roter_z));
				transition: var(--transition);
				// transition: transform 0.2s ease-out;
			}

			.h_zz {
				position: absolute;
				top: 0;
				left: 50%;
				transform: translate(-50%, -10%);
				width: 12rpx;
				height: 60rpx;
				z-index: 3;
				background-color: #ec4141;
			}

			.fz-wrap {
				// transition: transform 0.2s ease-out;
				transition: var(--transition);
				transform: rotateZ(var(--roter_z));
				position: relative;
				width: 100%;
				height: 100%;
				z-index: 3;

				view {
					font-size: 14px;
					font-weight: bold;
				}

				.z1 {
					position: absolute;
					top: 50rpx;
					left: 50%;
					transform: translate(-50%, 0) rotateZ(var(--roter_f));
					color: #ec4141;
					font-size: 16px;

					&::after {
						content: '';
						position: absolute;
						top: 46rpx;
						left: 50%;
						transform: translateX(-50%);
						width: 0;
						height: 0;
						border-left: 20rpx solid transparent;
						border-right: 20rpx solid transparent;
						border-bottom: 20rpx solid #ec4141;
					}
				}

				.z2 {
					position: absolute;
					top: 50%;
					right: 50rpx;
					transform: translate(0, -50%) rotateZ(var(--roter_f));
				}

				.z3 {
					position: absolute;
					bottom: 50rpx;
					left: 50%;
					transform: translate(-50%, 0) rotateZ(var(--roter_f));
				}

				.z4 {
					position: absolute;
					top: 50%;
					left: 50rpx;
					transform: translate(0, -50%) rotateZ(var(--roter_f));
				}
			}
		}
	}
</style>